<!doctype html> 
   <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Filter Bing maps pushpins by property - jQuery Bing maps</title>
		<meta name="description" content="An example of how to filter markers by different criterias using jQuery Bing maps v7 for web and mobile" />
		<meta name="author" content="Johan Säll Larsson" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="Filter Bing maps pushpins by property - jQuery Bing maps" />
		<meta name="DC.description" content="An example of how to filter markers by different criterias using jQuery Bing maps v7 for web and mobile" />
		<meta name="DC.creator" content="Johan Säll Larsson" />
        <meta name="DC.language" content="en" />
		<link type="text/css" rel="stylesheet" href="css/960/960.css" />
		<link type="text/css" rel="stylesheet" href="css/960/960_16_col.css" />
		<link type="text/css" rel="stylesheet" href="css/normalize/normalize.css" />
		<link type="text/css" rel="stylesheet" href="css/prettify/prettify.css" />
		<link type="text/css" rel="stylesheet" href="css/demo.css" />
		<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Anton" />
		<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
    </head>
    <body>
		<header class="dark">
			<div class="container_16">
				<h1><a href="/">jQuery Bing maps <span id="version"></span></a> filter by property example</h1>
			</div>
		</header>
		<div class="container_16">
			<article class="grid_16">
				<div class="item rounded dark">
					<div id="map_canvas"></div>
					<div id="filter_control" class="item gradient rounded shadow">
						<label for="tags">Filter by tag</label>
						<select id="tags"></select>
					</div>
				</div>
				<div class="content rounded light shadow">
					<h2>Using jQuery with Bing maps</h2>
					<p>
						Download <a href="http://jquery.com/">jQuery 1.4.X or higher</a> or
						use <a href="http://code.google.com/intl/sv-SE/apis/libraries/devguide.html">Googles</a> or <a href="http://www.asp.net/ajaxlibrary/cdn.ashx">Microsofts</a> 
						<abbr title="Content delivery network"><a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a></abbr>.
					</p>
<pre class="prettyprint rounded">
&lt;script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.bmap.js"&gt;&lt;/script&gt;</pre>

<pre class="prettyprint rounded">
$('#map_canvas').gmap({'credentials': YOUR_BING_MAP_CREDENTIALS, 'center': '0.0, 0.0' }).bind('init', function () {
	$('#map_canvas').gmap('addMarker', { 'foo': 'bar', 'location': '1.0, 1.0' });
	$('#map_canvas').gmap('addMarker', { 'foo': 'baz', 'location': '2.0, 2.0' });
	$('#map_canvas').gmap('find', 'markers', {'property': 'foo', 'value': 'bar' }, function(marker, isFound) {
		marker.setOptions({'visible': ( isFound ) ? true : false });
	});
});</pre>

<pre class="prettyprint rounded">
$('#map_canvas').gmap({'credentials': YOUR_BING_MAP_CREDENTIALS, 'center': '0.0, 0.0' }).bind('init', function () {
	$('#map_canvas').gmap('addMarker', { 'foo': 'bar, baz', 'location': '1.0, 1.0' });
	$('#map_canvas').gmap('addMarker', { 'foo': 'baz, qux', 'location': '2.0, 2.0' });
	$('#map_canvas').gmap('find', 'markers', { 'property': 'foo', 'value': 'bar', 'delimiter': ', ' }, function(marker, isFound) {
		marker.setOptions({'visible': ( isFound ) ? true : false });
	});
});</pre>

<pre class="prettyprint rounded">
$('#map_canvas').gmap({'credentials': YOUR_BING_MAP_CREDENTIALS, 'center': '0.0, 0.0', 'callback': function() {
	var self = this;
	self.addMarker({ 'foo': 'bar', 'location': '1.0, 1.0' });
	self.addMarker({ 'foo': 'baz', 'location': '2.0, 2.0' });
	self.find('markers', {'property': 'foo', 'value': 'bar' }, function(marker, isFound) {
		marker.setOptions({'visible': ( isFound ) ? true : false });
	});
}});</pre>

<pre class="prettyprint rounded">
$('#map_canvas').gmap({'credentials': YOUR_BING_MAP_CREDENTIALS, 'center': '0.0, 0.0', 'callback': function() {
	var self = this;
	self.addMarker({ 'foo': 'bar, baz', 'location': '1.0, 1.0' });
	self.addMarker({ 'foo': 'baz, qux', 'location': '2.0, 2.0' });
	self.find('markers', {'property': 'foo', 'value': 'bar', 'delimiter': ', ' }, function(marker, isFound) {
		marker.setOptions({'visible': ( isFound ) ? true : false });
	});
}});</pre>

				</div>
			</article>
		</div>
		<footer class="dark">
			<div class="container_16">
				<div class="grid_8 more">
					<h2>More Bing maps and jQuery examples</h2>
					<ul>
						<li><a href="jquery-bing-maps-hello-world-example.html">Bing maps with jQuery mobile "Hello world" example</a></li>
						<li class="sel buttonize"><a href="jquery-bing-maps-filter-by-property.html">Filter pushpins by property</a></li>
						<li><a href="jquery-bing-maps-load-marker-by-json.html">Load Bing map with JSON data</a></li>
						<li><a href="jquery-bing-maps-geocoding-search.html">Address and longitude/latitude (Geocoding) lookup with Bing maps</a></li>
						<li><a href="jquery-bing-maps-microdata.html">Add markers with microdata</a></li>
						<li><a href="jquery-bing-maps-microformat.html">Add markers with microformats</a></li>
						<li><a href="jquery-bing-maps-rdfa.html">Add markers with RDFa</a></li>
						<li><a href="jquery-bing-maps-extend-with-pagination.html">Extend the plugin with pagination</a></li>
						<li><a href="jquery-google-maps-clustering.html">Using clusters with Bing Maps</a></li>
						<li><a href="jquery-google-maps-data-attribute.html">Add markers with jQuery data attribute</a></li>
						<li><a href="jquery-google-maps-geolocation.html">Bing maps with geolocation</a></li>
						<li><a href="jquery-bing-maps-polygons-and-polylines.html">Polygons and polylines example</a></li>
						<li><a href="jquery-bing-maps-mobile.html">Bing maps with jQuery mobile (jQM)</a></li>
					</ul>
				</div>
				<div id="forum" class="hidden rounded forum grid_8"></div>
				<div class="grid_16" itemscope itemtype="http://data-vocabulary.org/Person">
					Author: <span itemprop="name">Johan S&auml;ll Larsson</span> (<a href="http://johansalllarsson.se" itemprop="url">http://johansalllarsson.se</a>)
				</div>
			</div>
		</footer>
		<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
		<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/underscore-1.2.2/underscore-min.js"></script>
		<script type="text/javascript" src="js/backbone-0.5.3/backbone-min.js"></script>
		<script type="text/javascript" src="js/prettify/prettify.min.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
		<script type="text/javascript" src="../js/jquery.ui.bmap.js"></script>
		<script type="text/javascript">
            $(function() { 
				demo.add(function() {
					$('#map_canvas').gmap(jQuery.extend({'callback': function() {
						var self = this;
						var map = self.get('map');
						var bounds = map.getBounds();
						var southWest = bounds.getSoutheast();
						var northEast = bounds.getNorthwest();
						var lngSpan = northEast.longitude - southWest.longitude;
						var latSpan = northEast.latitude - southWest.latitude;
						var images = [ 'http://google-maps-icons.googlecode.com/files/friends.png', 'http://google-maps-icons.googlecode.com/files/home.png', 'http://google-maps-icons.googlecode.com/files/girlfriend.png', 'http://google-maps-icons.googlecode.com/files/dates.png', 'http://google-maps-icons.googlecode.com/files/realestate.png', 'http://google-maps-icons.googlecode.com/files/apartment.png', 'http://google-maps-icons.googlecode.com/files/family.png' ];
						var tags = [ 'jQuery', 'Google maps', 'Plugin', 'SEO', 'Reddit', 'Homer', 'Bart', 'Lisa', 'Marge', 'Maggie' ];
						$('#tags').append('<option value="all">All</option>');
						$.each(tags, function(i, tag) {
							$('#tags').append('<option value="'+ tag + '">' + tag + '</option>');
						});
						for ( i = 0; i < 50; i++ ) {
							var temp = [];
							for ( j = 0; j < Math.random()*5; j++ ) {
								temp.push(tags[Math.floor(Math.random()*10)]);
							}
							self.addMarker({ 'id': 'm_'+i, 'icon': images[(Math.floor(Math.random()*7))], 'height': 37, 'width': 32, 'tags': temp.toString(), 'bounds':true, 'location': new Microsoft.Maps.Location(southWest.latitude + latSpan * Math.random(), southWest.longitude + lngSpan * Math.random()) }).click(function() {
								self.openInfoWindow({ 'title': 'Tags', 'description': this.target.tags }, this);
							});
						}
						self.addControl('filter_control', 2);
						$("#tags").change(function() {
							var tag = $(this).val();
							self.set('bounds', null);
							if  ( self.get('iw') != null ) {
								self.get('iw').setOptions({'visible': false });
							}
							if ( tag == 'all' ) {
								self.find('markers', {'property': 'tags', 'value': tag }, function(marker, found) {
									marker.setOptions({'visible':true});
									self.addBounds(marker.getLocation());
								});
							} else {
								self.find('markers', {'property': 'tags', 'value': tag, 'delimiter': ',' }, function(marker, found) {
									if (found) {
										marker.setOptions({'visible':true});
										self.addBounds(marker.getLocation());
									} else {
										marker.setOptions({'visible':false});
									}
								});
							}
						});
					}}, demo.mapOptions));
				}).load();
			});
        </script>
    
	</body>
</html>